{% extends 'base.html' %}
{% block link %}
{#    <meta id="refresh" http-equiv="refresh" content="120">#}
    <style type="text/css">
    th{
        text-align:center;/** 设置水平方向居中 */
        vertical-align:middle/** 设置垂直方向居中 */
    }
</style>
{% endblock %}
{% block miaoshu %}
    页面每3分钟自动刷新，数据来源：zabbix数据库，图片生成时间3分钟前
{% endblock %}
{% block body %}
    <div class="content">
    {% for i in data %}

        <div class="col-xs-6 " >
        {% if i.special == '1' %}
                <a href="#" data-toggle="modal" style="border:solid 2px #f00" data-target=".bs-example-modal-lg" class="thumbnail" onclick="edit_users('{{ i.graphid }}')">
                  <img style="width: 100%;height: 100%;" src="/static/image/{{ i.graphid }}.png" >
                </a>
        {% else %}
            <a href="#" data-toggle="modal"  data-target=".bs-example-modal-lg" class="thumbnail" onclick="edit_users('{{ i.graphid }}')">
                  <img style="width: 100%;height: 100%;" src="/static/image/{{ i.graphid }}.png" >
                </a>
        {% endif %}
        </div>
    {% endfor %}

<div class="modal fade bs-example-modal-lg" tabindex="-1" id="myModaledit" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog " style="width: 95%" role="document">
    <div class="modal-content" style="text-align: center;">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">详细展示</h4>
      </div>
        <div class="modal-body">
            <div class="row">
          <div class="col-md-9">
              <img id="tcimg" style="width: 100%;height: 100%;text-align: center;padding: 2px" src="" >
          </div>
          <div class="col-md-3 ">
                <div class="checkbox">
                  <label>
                    <input id="shouyezhanshi" type="checkbox" value="" onclick="inradio()">
                    首页展示
                  </label>
                </div>
              <table class="table table-striped" id="table-result">
            <thead>
            <tr>
                <th>端口</th>
                <th>信息</th>
            </tr>
            </thead>
            <tbody id="tbody-result">
            </tbody>
        </table>
          </div>
        </div>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
    </div>

{% endblock %}
{% block javascript %}
<script>
function edit_users(id) {
    var tbody=window.document.getElementById("tbody-result");
    $("#tcimg").attr('src','/static/image/'+id+'.png');
        $.ajax({
			url:'/gmess/',
			type:'GET',
			data:{modify:id},
			success:function (arg) {
                var obj = jQuery.parseJSON(arg);
                var str = "";
                if (obj.data.length > 0){
                for (i in obj.data) {
                        str += "<tr>" +
                        "<td>" + obj.data[i].fields.mark + "</td>" +
                        "<td>" + obj.data[i].fields.description + "</td>" +
                        "</tr>";
                    }
                    if (obj.mimi == '1'){
                        $('#shouyezhanshi').prop("checked","checked");
                    }else{
                        $('#shouyezhanshi').prop("checked",false);
                    }
                    tbody.innerHTML = str;
                    $('#shouyezhanshi').val(id);
                $('#myModaledit').modal({show:true});
                    }else{
                    str += "<tr>" +
                        "<td>" + '无数据' + "</td>" +
                        "<td>" + '无数据' + "</td>" +
                        "</tr>";
                    if (obj.mimi == '1'){
                        $('#shouyezhanshi').prop("checked", "checked");
                    }else{
                        $('#shouyezhanshi').prop("checked",false);
                    }

                    tbody.innerHTML = str;
                    $('#shouyezhanshi').val(id);
                    $('#myModaledit').modal({show:true});
                }
			},
			error:function () {
				console.log('failed');
			}
		});
	};
$(function () { $('#myModaledit').on('hide.bs.modal', function () {
      window.location.reload();})
    });
	</script>
    <script>
function inradio() {
    var id = $(" #shouyezhanshi ").val();
        $.ajax({
			url:'/inradio/',
			type:'POST',
			data:{modify:id},
			success:function (arg) {
                window.location.reload();
                console.log('true');
			},
			error:function () {
				console.log('failed');
			}
		});
	};
	</script>
    <script type="text/javascript">
			$(document).ready(function(){
				$('#index').addClass("active");
		});
    </script>

{% endblock %}